<template>
  <div id="detail">
    <detail-navbar class="detail-bar" @titleclick="ttclick" ref="bar"></detail-navbar>

    <scroll ref="scroll"
            class="content"
            @scroll="apear"
            :probeType="3">

      <detail-swiper :topimg="topimg"></detail-swiper>
      <detail-base-info :goods="goods"></detail-base-info>
      <detail-shop-info :shop="shops"></detail-shop-info>
      <detail-images-info @imgLoad="imgLoad" :images-info="detailInfo"></detail-images-info>
      <detail-params-info ref="params" :param-info="paramsInfo"></detail-params-info>
      <detail-comment-info :commentInfo="commentInfo" ref="comment"></detail-comment-info>
      <goods-list :goods="recommends" ref="recommend"></goods-list>
    </scroll>
    <detail-btbar @addcart="added"/>
    <back-top @click.native="backtop" v-show="ishow"></back-top>
  </div>
</template>

<script>
  import detailNavbar from './childdetail/detailNavbar';
  import detailSwiper from './childdetail/detailSwiper';
  import detailBaseInfo from './childdetail/detailBaseInfo';
  import detailShopInfo from './childdetail/DetailShopInfo';
  import detailImagesInfo from './childdetail/DetailImagesInfo';
  import detailParamsInfo from './childdetail/DetailParamsInfo';
  import detailCommentInfo from './childdetail/DetailCommentInfo';
  import goodsList from 'components/content/goods/GoodsList';
  import detailBtbar from './childdetail/detailBtbar'

  import BackTop from 'components/content/backtop/BackTop'
  import scroll from 'components/common/scroll/Scroll'
  import {getDetailData,Goods,Shop,GoodsParams,getRecommend} from "../../network/detail";

  export default {
    name: "detail",
    components:{
      detailNavbar,
      detailSwiper,
      detailBaseInfo,
      detailShopInfo,
      detailImagesInfo,
      detailParamsInfo,
      detailCommentInfo,
      detailBtbar,
      scroll,
      BackTop,
      goodsList
    },
    data(){
      return{
        iid: '',
        positiony: 0,
        topimg:[],
        goods:{},
        shops: {},
        detailInfo:{},
        paramsInfo:{},
        commentInfo:{},
        recommends: [],
        offsetheight: []
      }
    },
    created(){
      this.iid = this.$route.params.iid;
      getDetailData(this.iid).then(res => {
        const data = res.result;
        this.topimg = data.itemInfo.topImages;
        this.goods = new Goods(data.itemInfo,data.columns,data.shopInfo.services);
        this.shops = new Shop(data.shopInfo);
        this.detailInfo = data.detailInfo;
        this.paramsInfo = new GoodsParams(data.itemParams.info, data.itemParams.rule || {});
        if(data.rate.cRate !== 0){
          this.commentInfo = data.rate.list[0];
        }
        getRecommend().then(res => {
          this.recommends = res.data.list;
        })
      })

    },
    mounted(){
        this.$bus.$on('detailimgLoaded',() => {
          this.$refs.scroll && this.$refs.scroll.scrollRefresh();
        })


        setTimeout(() =>{
          this.offsetheight.push(0)
          this.offsetheight.push(this.$refs.params.$el.offsetTop);
          this.offsetheight.push(this.$refs.comment.$el.offsetTop);
          this.offsetheight.push(this.$refs.recommend.$el.offsetTop);
        },2000)

    },
    activated(){

    },
    methods:{
      imgLoad(){
        this.$refs.scroll.scrollRefresh()
      },
      backtop(){
        this.$refs.scroll.scrollTo(0,0);
        console.log(this.$refs.params.$el.offsetTop);
        console.log(this.$refs.comment.$el.offsetTop);
        console.log(this.$refs.recommend.$el.offsetTop);
      },
      apear(position){
        this.positiony = (-position.y)
        if(this.positiony <= this.offsetheight[1]){
          this.$refs.bar.currentIndex = 0

        }
        if(this.positiony >= this.offsetheight[1] && this.positiony <= this.offsetheight[2]){
          this.$refs.bar.currentIndex = 1

        }
        if(this.positiony >= this.offsetheight[2] && this.positiony <= this.offsetheight[3]){
          this.$refs.bar.currentIndex = 2

        }
        if(this.positiony >= this.offsetheight[3]){
          this.$refs.bar.currentIndex = 3

        }
      },
      ttclick(index){
        switch (index){
          case 0 :this.$refs.scroll.scrollTo(0,0,400);
                   break;
          case 1: this.$refs.scroll.scrollTo(0,-this.offsetheight[1],400);
          break;
          case 2: this.$refs.scroll.scrollTo(0,-this.offsetheight[2],400);
            break;
          case 3: this.$refs.scroll.scrollTo(0,-this.offsetheight[3],400);
            break;
        }
      },
      added(){
        const product = {};
        product.image = this.topimg[0];
        product.title = this.goods.titles;
        product.desc = this.goods.desc;
        product.price = this.goods.realPrice;
        product.iid = this.iid
        this.$store.commit('addcart',product)
      }
    },
    computed: {
      ishow(){
        return this.positiony >1000
      }
    }
  }
</script>

<style scoped>
  #detail{
    position: relative;
    z-index: 9;
    background-color: #ffffff;
    height: 100vh;
  }
  .detail-bar{
    background-color: #ffffff;
    position: relative;
    z-index: 9;
  }
  .content{
    height: calc(100% - 44px - 49px);
  }
</style>
